<template>
  <!-- 页面顶部 -->
  <div>
    <div class="Information_header">
      <!-- 页面顶部的上面模块第一个 -->
      <div class="Information_header_one">
        <!-- 标题模块 -->
        <div class="keyWord">
          <span>标题：</span>
          <input type="text" v-model="record.title">
        </div>
        <!-- 引擎模块 -->
        <div class="engineType">
          <span>引擎类型:</span>
          <form>
            <label>
              <select name="cars" class="crawlingChannel" v-model="record.engineType">
                <option value="" selected="selected">全部</option>
                <option value="1">百度</option>
                <option value="2">360</option>
                <option value="3">搜狗</option>
                <option value="4">微信</option>
              </select>
            </label>
          </form>
        </div>
      </div>
      <div class="Information_header_one">
        <!-- 关键字模块 -->
        <div class="keyWord">
          <span>关键词：</span>
          <input type="text" v-model="record.keyword">
        </div>
        <!-- 搜索模块 -->
        <div class="engineType">
          <el-button type="success" class="crawling_button" @click="serachAll">搜索</el-button>
        </div>
      </div>
    </div>

    <!-- 页面下半部分 -->
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="爬虫列表" name="first">
          <el-table
            align="center"
            ref="multipleTable"
            :data="tableInformation1"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              >
            </el-table-column>

            <el-table-column
              prop="id"
              label="编号"
              >

            </el-table-column>

            <el-table-column
              prop='title'
              label="标题"
              >

            </el-table-column>
            <el-table-column
              label="引擎类型"
              >
              <template slot-scope="scope">
                {{ scope.row.engineType === 1 ? '百度' : scope.row.engineType === 2 ? '360' : scope.row.engineType === 3 ?
                '搜狗' : '微信' }}
              </template>
            </el-table-column>
            <el-table-column
              prop='articleFrom'
              label="文章来源"
              >

            </el-table-column>
            <el-table-column
              prop='publishingTime'
              label="文章发布时间"
              >

            </el-table-column>
            <el-table-column
              prop="originalHref"
              label="文章链接"
              >
            </el-table-column>
            <el-table-column
              prop="keyword"
              label="关键词"

              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="状态"
              >
              <template slot-scope="scope">
                {{ scope.row.states === 1 ? '未采用' : scope.row.states === 2 ? '已采用' : '划无效' }}
              </template>
            </el-table-column>
            <el-table-column
              prop='gmtCreate'
              label="爬取时间"
              >

            </el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="scope">
                <el-button
                  :disabled="scope.row.states===2"
                  size="mini"
                  @click="$router.push({ path: '/informationEdit', query: {id: scope.row.id, source: 'pachong'} })">
                  编辑
                </el-button>
                <el-popconfirm
                  title="要废弃这篇文章吗？"
                  @confirm="handleInvalid(scope.$index, scope.row)"
                >
                  <el-button
                    size="mini"
                    slot="reference"
                    type="danger"
                    :disabled="scope.row.states === 3"
                    >划无效
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div style="background-color: white;display: flex;justify-content: center">
            <el-pagination
              @current-change="changeIndex"
              layout="prev, pager, next"
              :total="total1">
            </el-pagination>
          </div>
        </el-tab-pane>
        <!-- 已采用模块 -->
        <el-tab-pane label="已采用" name="second">
          <el-table
            align="center"
            ref="multipleTable"
            :data="tableInformation2"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              >
            </el-table-column>
            <el-table-column
              prop="id"
              label="编号"
              >

            </el-table-column>

            <el-table-column
              prop='title'
              label="标题"
              >

            </el-table-column>
            <el-table-column
              label="引擎类型"
              >
              <template slot-scope="scope">
                {{ scope.row.engineType === 1 ? '百度' : scope.row.engineType === 2 ? '360' : scope.row.engineType === 3 ?
                '搜狗' : '微信' }}
              </template>
            </el-table-column>
            <el-table-column
              prop='articleFrom'
              label="文章来源"
              >

            </el-table-column>
            <el-table-column
              prop='publishingTime'
              label="文章发布时间"
              >

            </el-table-column>
            <el-table-column
              prop="originalHref"
              label="文章链接"
              >
            </el-table-column>
            <el-table-column
              prop="keyword"
              label="关键词"

              align="center"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop='gmtCreate'
              label="最新一次上传时间"
              >

            </el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="scope">
                <el-popconfirm
                  title="确定要下架此条？"
                  @confirm="handleInvalid(scope.$index, scope.row)"
                >
                  <el-button
                    size="mini"
                    slot="reference"
                    type="danger"
                    >下架
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div style="background-color: white;display: flex;justify-content: center">
            <el-pagination
              @current-change="changeIndex1"
              layout="prev, pager, next"
              :total="total3">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="未采用" name="third">
          <el-table
            align="center"
            ref="multipleTable"
            :data="tableInformation3"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
            >
            </el-table-column>
            <el-table-column
              prop="id"
              label="编号"
            >

            </el-table-column>

            <el-table-column
              prop='title'
              label="标题"
            >

            </el-table-column>
            <el-table-column
              label="引擎类型"
            >
              <template slot-scope="scope">
                {{ scope.row.engineType === 1 ? '百度' : scope.row.engineType === 2 ? '360' : scope.row.engineType === 3 ?
                '搜狗' : '微信' }}
              </template>
            </el-table-column>
            <el-table-column
              prop='articleFrom'
              label="文章来源"
              >

            </el-table-column>
            <el-table-column
              prop='gmtCreate'
              label="文章发布时间"
            >

            </el-table-column>
            <el-table-column
              prop="originalHref"
              label="文章链接"
            >
            </el-table-column>
            <el-table-column
              prop="keyword"
              label="关键词"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop='gmtCreate'
              label="最新一次上传时间"
            >

            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="$router.push({ path: '/informationEdit', query: {id: scope.row.id, source: 'pachong'} })">
                  编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleUndercarriage(scope.$index, scope.row)">发布
                </el-button>

              </template>
            </el-table-column>
          </el-table>
          <div style="background-color: white;display: flex;justify-content: center">
            <el-pagination
              @current-change="changeIndex2"
              layout="prev, pager, next"
              :total="total2">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="划无效" name="fourth">
          <el-table
            align="center"
            ref="multipleTable"
            :data="tableInformation4"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              >
            </el-table-column>
            <el-table-column
              prop="id"
              label="编号"
              >

            </el-table-column>

            <el-table-column
              prop='title'
              label="标题"
              >

            </el-table-column>
            <el-table-column
              label="引擎类型"
              >
              <template slot-scope="scope">
                {{ scope.row.engineType === 1 ? '百度' : scope.row.engineType === 2 ? '360' : scope.row.engineType === 3 ?
                '搜狗' : '微信' }}
              </template>
            </el-table-column>
            <el-table-column
              prop='articleFrom'
              label="文章来源"
              >

            </el-table-column>
            <el-table-column
              prop="originalHref"
              label="文章链接"
              >
            </el-table-column>
            <el-table-column
              prop="keyword"
              label="关键词"

              show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="$router.push({ path: '/informationEdit', query: {id: scope.row.id, source: 'pachong'} })">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="background-color: white;display: flex;justify-content: center">
            <el-pagination
              @current-change="changeIndex3"
              layout="prev, pager, next"
              :total="total4">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>

  </div>

</template>

<script>
export default {
  data () {
    return {
      // 已采用的
      tableInformation2: [],
      // 总的爬虫信息
      tableInformation1: [],
      // 未采用的信息
      tableInformation3: [],
      // 划无效的
      tableInformation4: [],
      activeName: 'first',
      // 爬虫列表请求参数
      record: {
        current: 1, // 当前页
        size: 10, // 当页列表中显示多少条数据
        engineType: '', // 引擎类型
        keyword: '', // 关键词
        title: '', // 标题
        orders: [
          {
            asc: true,
            column: 'gmtCreate'
          }
        ]// 排序
      },
      // 已采用模块请求参数
      records: {
        channelCategoryId: 0, // 所属频道  --有疑问
        articlePageShow: '', // 是否频道推荐（是否推荐） --有疑问
        clicks: 0, // 实际浏览量  --有疑问
        informationDate: '' // 最新一次上传时间
      },
      total1: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      multipleSelection: []

    }
  },
  created () {
    this.getTableList(1)
    this.getTableList(2)
    this.getTableList(3)
    this.getTableList(4)
  },
  methods: {
    serachAll () {
      this.getTableList(1)
      this.getTableList(2)
      this.getTableList(3)
      this.getTableList(4)
    },
    // 下架资讯
    xia (id) {
      this.$http('/stage/article/offlineShelves', {articleId: id}, 'get', (data) => {
        console.log(data)
      })
    },
    // 爬虫列表更改
    changeIndex (index) {
      this.record.current = index
      this.getTableList(1)
    },
    changeIndex1 (index) {
      this.record.current = index
      this.getTableList(3)
    },
    changeIndex2 (index) {
      this.record.current = index
      this.getTableList(2)
    },
    changeIndex3 (index) {
      this.record.current = index
      this.getTableList(4)
    },
    // 请求表格数据
    getTableList (i) {
      this.loading1 = true
      let data = {
        current: this.record.current,
        engineType: this.record.engineType,
        keyword: this.record.keyword,
        orders: [
          {
            asc: false,
            column: 'gmt_create'
          }
        ],
        size: this.record.size,
        title: this.record.title
      }
      switch (i) {
        case 1:
          delete data.states
          break
        case 2:
          data.states = 1
          break
        case 3:
          data.states = 2
          break
        case 4:
          data.states = 3
          break
      }
      this.$http('/stage/spider/getSpiderLibDTO', data, 'post', res => {
        if (res.data.code === 200) {
          switch (i) {
            case 1:
              this.tableInformation1 = res.data.data.records
              break
            case 2:
              this.tableInformation3 = res.data.data.records
              break
            case 3:
              this.tableInformation2 = res.data.data.records
              break
            case 4:
              this.tableInformation4 = res.data.data.records
              break
          }
          this[`total${i}`] = res.data.data.total
        }
      })
    },

    handleClick () {
      this.record.current = 0
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 发布文章
    handleUndercarriage (i, v) {
      let {originalContent: content, gmtCreate: publishTime} = v
      console.log({...v, content, publishTime})
      this.$http('/stage/information/addInformation', {...v, content, publishTime}, 'post', res => {
        this.getTableList(3)
        this.getTableList(2)
      })
    },
    // 点击划无效发送请求，里面包含状态改变以及该条数据存入划无效模块中
    handleInvalid (index, row) {
      this.$http('/stage/spider/disuseSpiderLib', {
        id: row.id
      }, 'get', res => {
        if (res.data.code === 200) {
          this.tableInformation1[index].states = 3
          this.getTableList(1)
          this.getTableList(4)
          this.getTableList(3)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

  // 头部占用模块
  .Information_header {
    width: 100%;
    height: 150px;
    background-color: white;
    padding-left: 50px;
    padding-top: 30px;

    box-sizing: border-box;
    // 头部每一行总体样式模块
    .Information_header_one {
      width: 600px;
      height: 50px;

      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      // 关键字模块
      .keyWord {
        display: flex;

        width: 400px;
        height: 50px;

        span {
          width: 60px;
          height: 33px;
          line-height: 33px;
        }

        input {
          width: 200px;
          height: 33px;
          line-height: 33px;
        }
      }

      // 引擎模块
      .engineType {
        display: flex;

        width: 400px;
        height: 50px;
        justify-content: flex-end;

        span {
          width: 60px;
          height: 33px;
          line-height: 33px;
        }

        .crawlingChannel {
          width: 200px;
          height: 35px;
          margin-left: 10px;

        }

        .crawling_button {
          width: 100px;
          height: 35px;
          line-height: 0px;
          box-shadow: 6px 6px 10px #ABAAAB;

        }

      }
    }

  }
</style>
